<template>
    <div class="innerContainer">
        <common-title>
            <template #expand>
            </template>
        </common-title>

        <div class="innerPane">
            <div class="filterArea">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="断面编码">
                        <el-input @keyup.enter="search" v-model="searchForm.sectionCode"
                            placeholder="请输入断面编码"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button plain type="primary" @click="search">查询</el-button>
                        <el-button plain @click="onClear">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="tableData" border row-key="id" style="width: 100%;  " row-class-name="fixed-row"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" width="50" label="序号" />
                <el-table-column header-align="center" prop="sectionCode" label="断面编码" width="160" />
                <el-table-column header-align="center" prop="channelCount" label="通道数量" width="120" />
                <el-table-column header-align="center" prop="lineId" label="line_id" width="220" />
                <el-table-column header-align="center" prop="isUnzip" label="开启同步" width="100">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isPush" :active-value="1" :inactive-value="0"
                            :before-change="() => toggleSwitch(scope.row,'isPush')" />
                        <!-- <el-tag :type="toYnTag(scope.row)" effect="dark">
                            {{ toYnText(scope.row.isUnzip) }}
                        </el-tag> -->
                    </template>
                </el-table-column>

                <el-table-column header-align="center" prop="isSync" label="开启解包" width="120">
                    <template #default="scope">
                        <el-tag :type="toYnTag(scope.row.isSync)" effect="dark">
                            {{ toYnText(scope.row.isSync) }}
                        </el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column header-align="center" prop="remark" label="备注" />

                <el-table-column label="操作" header-align="center" width="120" prop="col9">
                    <template #default="scope">
                        <el-link type="primary" size="small" @click="openView(scope.$index, scope.row)">详情</el-link>
                    </template>
                </el-table-column>


            </el-table>
            <!-- 分页 -->
            <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
                :page-sizes="[10, 50, 100, 200]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { onMounted, reactive, ref } from "vue";

import { useRouter, useRoute } from "vue-router";

import { sectionList } from "../../utils/requests";

const router = useRouter();

const route = useRoute();


// Dom 挂载之后
onMounted(() => {
    search();
});

// 用户数据
let tableData = ref([]);

let total = ref(0);

let yn = ref([
    { val: 0, label: "是", type: 'warning' },
    { val: 1, label: "否", type: 'success' }
]);


// 搜索条件
const searchForm = reactive({
    current: 1,
    size: 10,
    sectionCode: "",
});

const onClear = () => {
    (searchForm.sectionCode = ""), search();
};

const handleSizeChange = (size) => {
    searchForm.size = size;
    search();
};
const handleCurrentChange = (current) => {
    searchForm.current = current;
    search();
};


const toYnTag = (val) => {
    return yn.value.find(item => item.val === val)?.type || "info";
};
 
const toggleSwitch = (row,key) => { 
    try { 

        console.log('row,key',row,key);

        return true          // 允许切换
    } catch (e) {
        return false         // 阻止切换，自动回滚
    }  
};

const toYnText = (val) => {
    return yn.value.find(item => item.val === val)?.label || "";
};


const search = () => {
    searchForm.current = 1;

    sectionList(searchForm).then((res) => {
        tableData.value = res.records;

        total.value = res.total;
    });
};

</script>


<style scoped>
.filterArea {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.filterArea .el-select {
    width: 120px;
}

.el-table .el-link {
    margin-right: 10px;
}
</style>
